<template>
  <div class="estimate-prcie">
    <backfather></backfather>
    <div class="price-box">
      <p class="title">{{title}}</p>
      <h1 class="price">{{price}}元</h1>
    </div>
    <div class="message">
      <div class="text base clearfix">
        <p class="left">{{this.base}}</p>
        <p class="right">{{this.basePrice}}元</p>
      </div>
      <div class="text only clearfix">
        <p class="left">{{this.only}}</p>
        <p class="right">{{this.onlyPrice}}元</p>
      </div>
      <div class="text time clearfix">
        <p class="left">{{this.time}}</p>
        <p class="right">{{this.timePrice}}元</p>
      </div>
      <div class="text night clearfix">
        <p class="left">{{this.night}}</p>
        <p class="right">{{this.nightPrice}}元</p>
      </div>
      <div class="text discount clearfix">
        <p class="left">{{this.discount}}</p>
        <p class="right">-{{this.discountPrice}}元</p>
      </div>
    </div>
    <div class="tips">
      <p class="tips-text">{{this.tips}}</p>
    </div>
    <p class="desc"> <router-link to="/estimatePriceDesc">{{this.desc}}</router-link></p>
  </div>
</template>

<script type="text/ecmascript-6">
import backfather from 'base/back-father/back-father'

export default {
  data () {
    return {
      title: '价格预估',
      price: '138',
      base: '基础价(包含30公里，60分钟)',
      basePrice: '138',
      only: '超里程单价（2.5元/公里）',
      onlyPrice: 'xx',
      time: '超时单价（0.5元/分钟）',
      timePrice: 'xx',
      night: '夜间单价（1元/公里）',
      nightPrice: 'xx',
      discount: '优惠卷抵扣',
      discountPrice: 'xx',
      tips: '预估费用仅供参考，实际费用可能因交通情况、天气等因素不同',
      desc: '计价规则详情 >'
    }
  },
  components: {
    backfather
  }
}
</script>

<style  scoped lang="stylus" rel="stylesheet/stylus">
  .estimate-prcie
    width: 100%
    height: auto
    min-height: 100vh
    .price-box
      width: 100%
      height: auto
      .title
        margin-top: 86px
        font-size: 13px
        color: rgb(51, 51, 51)
      .price
        margin-top: 30px
        font-size: 34px
    .message
      width: 250px
      height: 180px
      margin: 0 auto
      margin-top: 30px
      border-bottom: 1px solid rgb(153, 153, 153)
      .text
        width: 100%
        height: 13px
        margin-bottom: 13px
        font-size: 13px
        color: rgb(153, 153, 153) 
      .left
        float: left
      .right
        float: right
    .tips
      width: 250px
      height: auto
      margin: 0 auto
      margin-top: 30px
      font-size: 12px
      color: rgb(153, 153, 153)
      text-align: left
    .desc
      margin-top: 30px
      font-size: 10px
      color: rgb(153, 153, 153)
</style>